<template>
  <div flex>
    <div class="flex_1 border_right padding_right_10">
      <!-- <div>表单</div> -->
      <avue-form ref="form" v-model="obj" :option="option" @submit="handleSubmit">
        <!-- <template slot="menuForm" slot-scope="scope">
          <el-button @click="tip">生成PDF文件</el-button>
        </template> -->
      </avue-form>

    </div>
    <div id="view_warper" class="flex_1 margin_left_10 view_warper">
      <!-- <div>预览</div> -->
      <h1 class="text_align_center">火灾痕迹物品提取清单</h1>
      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <th>序号</th>
          <th colspan="2">名称</th>
          <th>编号</th>
          <th colspan="2">提取部位</th>
          <th colspan="2">规格</th>
          <th>数量</th>
          <th colspan="5">特征</th>
        </tr>
        <tr v-for="(item,index) in tableData.listing" :key="index">
          <td style="height:36px">
            <input v-if="patternIsEdit" v-model="item.serial" type="text">
            <span v-else>{{ item.serial }}</span>
          </td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="item.name" type="text">
            <span v-else>{{ item.name }}</span></td>
          <td>
            <input v-if="patternIsEdit" v-model="item.number" type="text">
            <span v-else>{{ item.number }}</span>
          </td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="item.part" type="text">
            <span v-else>{{ item.part }}</span></td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="item.specification" type="text">
            <span v-else>{{ item.specification }}</span>
          </td>
          <td>
            <input v-if="patternIsEdit" v-model="item.acount" type="text">
            <span v-else>{{ item.acount }}</span>
          </td>
          <td colspan="5">
            <input v-if="patternIsEdit" v-model="item.feature" type="text">
            <span v-else>{{ item.feature }}</span>
          </td>
        </tr>
        <tr>
          <th rowspan="3">提取人</th>
          <th colspan="2">姓名</th>
          <th colspan="7">工作单位</th>
          <th colspan="4">签名</th>
        </tr>
        <tr v-for="(item,index) in tableData.collecter" :key="index+'a'">
          <td colspan="2" style="height:36px">
            <input v-if="patternIsEdit" v-model="item.name" type="text">
            <span v-else>{{ item.name }}</span>
          </td>
          <td colspan="7">
            <input v-if="patternIsEdit" v-model="item.org" type="text">
            <span v-else />{{ item.org }}</td>
          <td colspan="4">
            <input v-if="patternIsEdit" v-model="item.signature" type="date">
            <span v-else />{{ item.signature }}</td>
        </tr>

        <tr>
          <th rowspan="3">证人或当事人</th>
          <th colspan="2">姓名</th>
          <th colspan="3">身份证件号码</th>
          <th colspan="2">单位或住址</th>
          <th colspan="2">联系电话</th>
          <th colspan="4">签名</th>
        </tr>
        <tr v-for="(item,index) in tableData.witness" :key="index+'b'">
          <td colspan="2" style="height:36px">
            <input v-if="patternIsEdit" v-model="item.name" type="text">
            <span v-else />{{ item.name }}</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="item.cardNum" type="text">
            <span v-else />{{ item.cardNum }}</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="item.org" type="text">
            <span v-else />{{ item.org }}</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="item.phone" type="text">
            <span v-else />{{ item.phone }}</td>
          <td colspan="4">
            <input v-if="patternIsEdit" v-model="item.signature" type="date">
            <span v-else />{{ item.signature }}</td>
        </tr>
      </table>

      <!-- <div class="" flex="dir:top cross:center" style="position: absolute;bottom: 60px;right: 20px;">
        <el-button size="mini" type="primary" plain @click="handleWindowPrint">生成文件预览</el-button>
        <el-button class="margin_top_10" type="danger" size="mini" plain @click="handleDown">生成PDF</el-button>
      </div> -->

    </div>
  </div>
</template>

<script>
const pickerOptions = {
  shortcuts: [{
    text: '今天',
    onClick(picker) {
      picker.$emit('pick', new Date())
    }
  }, {
    text: '昨天',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      picker.$emit('pick', date)
    }
  }, {
    text: '一周前',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', date)
    }
  }]
}
import { handleWindowPrint } from '@/utils/ruoyi'

export default {
  data() {
    const listing = Array.from({ length: 7 }).map(item => {
      return {
        serial: undefined, // 序号
        name: undefined, // 名称
        number: undefined, // 编号
        part: undefined, // 提取部位
        specification: undefined, // 规格
        acount: undefined, // 数量
        feature: undefined // 特征
      }
    })

    // 证人或当事人
    const witness = Array.from({ length: 2 }).map(item => ({
      name: undefined, // 姓名
      cardNum: undefined, // 身份证号码
      org: undefined, // 单位或住址
      phone: undefined, // 联系电话
      signature: undefined// 签名
    }))
    // 提取人
    const collecter = Array.from({ length: 2 }).map(item => ({
      name: undefined, // 姓名
      org: undefined, // 工作单位
      signature: undefined// 签名
    }))

    return {
      obj: {},
      patternIsEdit: false,
      tableData: {
        'address': 'string',
        'archivesId': 0,
        'collecter': collecter,
        'id': 0,
        'listing': listing,
        // 'listingDate': this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
        // 'alarmTimeDate': this.parseTime(new Date(), '{y}-{m}-{d}'),
        // 'alarmTimeTime': parseTime(new Date(), '{h}:{i}'),
        'title': 'string',
        'witness': witness
      }

    }
  },
  computed: {
    option() {
      return {
        submitText: '保存内容',
        group: [
          {
            label: '询问人',
            prop: 'jbxx',
            icon: 'el-icon-edit-outline',
            column: [
              {
                label: '询问人',
                prop: 'inquirytorName',
                value: '薛队长'
              },
              {
                label: '询问人单位',
                prop: 'inquirytorOrg',
                value: '萧山救援大队'
              }
            ]
          }, {
            label: '记录人',
            prop: 'tksq',
            icon: 'el-icon-view',
            column: [
              {
                label: '记录人',
                prop: 'recordtorName',
                value: '梁副队长'
              },
              {
                label: '记录人单位',
                prop: 'recordtorOrg',
                value: '萧山救援大队'
              }
            ]
          },
          {
            label: '被询问人',
            prop: 'yhxxs',
            icon: 'el-icon-edit-outline',
            column: [

              {
                label: '被询问人',
                prop: 'reInquirytorName',
                value: '郝德占'
              },
              {
                label: '性别',
                prop: 'reInquirytorSex',
                type: 'select',
                dicData: [{ value: '0', label: '男' }, { value: '1', label: '女' }],
                value: '0'
              },
              {
                label: '年龄',
                prop: 'reInquirytorAge',
                value: '30'
              },
              {
                label: '出生日期',
                prop: 'reInquirytorBirth',
                type: 'date',
                value: new Date('1991/08/19')
              },
              {
                label: '证件类型',
                prop: 'reInquirytorCardType',
                type: 'select',
                dicData: [{ value: '0', label: '居民身份证' }, { value: '1', label: '外国人居留证' }],
                value: '0'
              },
              {
                label: '证件号码',
                prop: 'reInquirytorCardNum',
                value: '37082919895622738'
              },
              {
                label: '人大代表',
                prop: 'reInquirytorIsNpc',
                type: 'select',
                dicData: [{ value: '0', label: '否' }, { value: '1', label: '是' }],
                value: '0'
              },
              {
                label: '联系电话',
                prop: 'reInquirytorPhone',
                value: '19857402340'
              },
              {
                label: '现住址',
                prop: 'reInquirytorAddressNow',
                span: 24,
                value: '余杭区良渚街道亲亲家园'
              },
              {
                label: '户籍',
                prop: 'reInquirytorAddressOld',
                span: 24,
                value: '山东省济南市天桥区'
              },
              {
                label: '到达方式',
                prop: 'reInquirytorGoType',
                type: 'select',
                dicData: [{ value: '0', label: '口头传唤' }, { value: '1', label: '被扭送' }, { value: '2', label: '自动投案' }],
                value: '0'
              },
              {
                label: '到达时间',
                prop: 'reInquirytorStartTime',
                type: 'datetime',
                value: new Date(),
                pickerOptions: pickerOptions
              },
              {
                label: '离开时间',
                prop: 'reInquirytorEndTime',
                type: 'datetime',
                value: new Date(),
                pickerOptions: pickerOptions
              },
              {
                label: '本人签名',
                prop: 'reInquirytorSignature',
                value: '郝德占'
              },
              {
                label: '笔录内容',
                prop: 'content',
                span: 24,
                type: 'textarea',
                value: `问：fsdfsdfsdfsf发射点点发射发射点点发射
答：发射点点发射发射点点发射发射点点发射
问：豆腐干豆腐干发射点点发射发射点点发射发射点点发射
问：fsdfsdfsdfsf发射点点发射发射点点发射
答：发射点点发射发射点点发射发射点点发射
问：豆腐干豆腐干发射点点发射发射点点发射发射点点发射
问：fsdfsdfsdfsf发射点点发射发射点点发射
答：发射点点发射发射点点发射发射点点发射
问：豆腐干豆腐干发射点点发射发射点点发射发射点点发射
问：fsdfsdfsdfsf发射点点发射发射点点发射
答：发射点点发射发射点点发射发射点点发射
问：豆腐干豆腐干发射点点发射发射点点发射发射点点发射
问：fsdfsdfsdfsf发射点点发射发射点点发射
答：发射点点发射发射点点发射发射点点发射
问：豆腐干豆腐干发射点点发射发射点点发射发射点点发射`
              }
            ]
          }
        ],

        column: [
          {
            label: '询问次数',
            prop: 'time',
            span: 24,
            type: 'input-number',
            value: '2'
          },
          {
            label: '开始时间',
            prop: 'startTime',
            type: 'datetime',
            value: new Date(),
            pickerOptions: pickerOptions
          },
          {
            label: '结束时间',
            prop: 'endTime',
            type: 'datetime',
            value: new Date(),
            pickerOptions
          },
          {
            label: '案发地点',
            prop: 'address',
            span: 24,
            value: '萧山区西兴街道智联社区香山公寓1幢1单元1206室'
          }

        ]
      }
    }
  },
  methods: {
    handleSubmit(obj, done) {
      this.$emit('submit', obj, done)
    },
    handleWindowPrint() {
      handleWindowPrint('#view_warper', '笔录', this)
    }
  }
}
</script>
